<template>
  <div id="app-container">
    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="labelQueryVo.name" placeholder="标签名"/>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList(-1)">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
      <el-button type="primary" @click="handleTOAddLabel">新增标签</el-button>
    </el-form>

    <!--数据显示列表-->
    <el-table :data="dataList" fit highlight-current-row>
      <el-table-column type="index" label="序号" width="70">
        <template slot-scope="scope">
          {{pageSize * (currentPage - 1) + scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="标签编号" width="80" ></el-table-column>
      <el-table-column prop="name" label="标签名称" width="80" ></el-table-column>
      <el-table-column prop="updateTime" label="最后修改时间" width="80" ></el-table-column>
      <el-table-column prop="status" label="使用状态" width="200">
        <template slot-scope="scope">
          <el-switch
            @change="handleChangeStatus($event, scope.row.id)"
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="'1'"
            :inactive-value="'0'"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleToEdit(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleRemove(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- Dialog：添加和修改视频表单 -->
    <el-dialog :visible.sync="dialogLabelFormVisible" title="视频维护">
      <el-form :model="label" label-width="120px">
        <el-form-item label="标签名称">
          <el-input v-model="label.name"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogLabelFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleVideoSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>
<script>
import label from '../../../api/label'

export default {
  // 必须使用方法，需要给返回值
  data(){
    return{
      currentPage: 1,            // 当前页
      pageSize: 2,               // 每页记录数
      dataList: [],              // 分页数据
      total: 0,                  // 总记录数
      labelQueryVo: {},
      label: {},
      dialogLabelFormVisible: false

    }
  },
  created() {
    this.getList();
  },
  methods:{
    getList(value){
      if(value == -1){
        this.currentPage = 1;
      }
      label.getList(this.currentPage, this.pageSize, this.labelQueryVo).then(res => {
        console.log(res.data);
        this.dataList = res.data.data;
        this.total = res.data.total;
      })
    },
    resetData(){
      // 清空搜索内容
      this.labelQueryVo = {};
      // 重新查询数据
      this.getList();
    },
    // 每页记录数发生变化
    handleSizeChange(size){
      this.pageSize = size;
      this.getList();
    },
    // 当前页发生变化
    handleCurrentChange(current){
      this.currentPage = current;
      this.getList();
    },
    // 删除数据
    handleRemove(id){
      console.log("======" + id)
      this.$confirm("是否确认删除数据", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'})
        .then(() => {
          // 表示点击了确定
          label.remove(id).then(res => {
            // 弹出成功的提示信息
            this.$message.success(res.message);
            // 重新加载数据
            this.getList();
          });
        })
        .catch(() => {
          // 表示点击了取消
          this.$message.info("取消删除操作");
        });
    },
    handleChangeStatus(val, organizationId){
      label.modifyStatusById(organizationId).then(res => {
        this.$message.success(res.message);
      })
    },
    // 显示添加窗口
    handleTOAddLabel(){
      this.label = {};
      this.dialogLabelFormVisible = true;
    },
    // 显示编辑窗口
    handleToEdit(id){
      label.queryById(id).then(res => {
        this.label = res.data;
        this.dialogLabelFormVisible = true;
      })
    },
    // 提交表单
    handleVideoSubmit(){
      if(this.label && this.label.id){
        label.edit(this.label).then(res => {
          this.$message.success(res.message);
          this.dialogLabelFormVisible = false;
          this.getList();
        })
      }else{
        label.add(this.label).then(res => {
          this.$message.success(res.message);
          this.dialogLabelFormVisible = false;
          this.getList();
        });
      }

    }

  }
}
</script>
